import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect,Route,Switch } from 'react-router-dom'
import { Layout } from 'antd';

import LeftNav from '../../components/LeftNav/LeftNav'
import Header from '../../components/Header/Header'

import Home from './Home/Home'
import Category from './Category/Category'
import Product from './Product/Product'
import Role from './Role/Role'
import User from './User/User'
import Bar from './Charts/Bar/Bar'
import Line from './Charts/Line/Line'
import Pie from './Charts/Pie/Pie'
import './admin.less'

const {  Footer, Sider, Content } = Layout;

@connect(
  state => ({ userInfo: state.userInfo }),
  {}
)
class Admin extends Component {

  //在render里，若想实现跳转，最好用<Redirect/>,
  render () {
    // console.log(this.props);
    const {isLogin}=this.props.userInfo
    if (!isLogin) {
      return <Redirect to='/login'/>
    }
    return (
        <Layout className='admin'>
          <Sider className='sider'>
            <LeftNav/>
          </Sider>
          <Layout>
            <Header/>
            <Content className='content'>
              <Switch>
                <Route path='/admin/home' component={Home }/>
                <Route path='/admin/product_about/category' component={Category }/>
                <Route path='/admin/product_about/product' component={Product }/>
                <Route path='/admin/role' component={Role }/>
                <Route path='/admin/user' component={User }/>
                <Route path='/admin/charts/bar' component={Bar }/>
                <Route path='/admin/charts/line' component={Line }/>
                <Route path='/admin/charts/pie' component={Pie }/>
                <Redirect to='/admin/home'/>
              </Switch>
            </Content>
            <Footer style={{textAlign:'center',color:'rgba(0,0,0,0.2)'}}>
              推荐使用谷歌浏览器，可以获得更佳的页面操作体验
            </Footer>
          </Layout>
        </Layout>
    )
  }
}

export default Admin
